import Link from 'next/link';
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: '吃什么 - 随机午餐决策工具',
  description: '轻量级午餐决策工具：支持完全随机与反向筛选模式，帮助您快速决定吃什么',
  keywords: ['吃什么', '午餐决策', '随机选择', '饮食推荐'],
  openGraph: {
    title: '吃什么 - 随机午餐决策工具',
    description: '轻量级午餐决策工具：支持完全随机与反向筛选模式，帮助您快速决定吃什么',
    type: 'website',
    locale: 'zh-CN',
  },
  twitter: {
    card: 'summary',
    title: '吃什么 - 随机午餐决策工具',
    description: '轻量级午餐决策工具：支持完全随机与反向筛选模式，帮助您快速决定吃什么',
  },
  alternates: {
    canonical: '/',
  },
};

export default function Home() {
  return (
    <main className="min-h-screen flex flex-col items-center justify-center p-4">
      <section className="space-y-8 max-w-2xl mx-auto w-full">
        <div className="text-center space-y-4">
          <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent">
            🍽️ 中午吃什么？
          </h1>
          <p className="text-base md:text-lg text-black/70 dark:text-white/70 max-w-md mx-auto">
            轻量级午餐决策工具：支持完全随机与反向筛选模式。
          </p>
        </div>

        <div className="flex flex-col sm:flex-row gap-4 justify-center mt-8">
          <Link
            href="/result?mode=random"
            prefetch={true}
            className="rounded-md bg-foreground text-background px-6 py-3 text-base font-medium hover:bg-foreground/90 transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground text-center"
            aria-label="随机选择一个餐厅或食物"
          >
            随便来一个！
          </Link>
          <Link
            href="/filter"
            prefetch={true}
            className="rounded-md border border-black/10 dark:border-white/20 px-6 py-3 text-base font-medium hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border text-center"
            aria-label="通过筛选条件选择餐厅或食物"
          >
            筛选一下
          </Link>
        </div>

        <div className="mt-12 text-center text-sm text-gray-500 dark:text-gray-400">
          <p>让选择不再成为难题，享受每一餐的美好</p>
        </div>
      </section>
    </main>
  );
}
